<script>
import { reactive, ref } from "@vue/reactivity";
import { useStore } from "../store/index";
import { Toast } from "vant";
import { useRoute, useRouter } from "vue-router";
import { nextTick } from "@vue/runtime-core";
import { public_status } from "../store/public_status";
export default {
  setup() {
    // # 引入用户数据
    const userData = useStore().userData;

    // # 隐藏底部导航
    public_status().display = false;

    // # 数据中心
    let data = reactive({
      account: null, // # 验证账号
      psw: false, // # 验证密码

      isUp: false, // # 控制面板升降
    });

    // # 获取原生dom
    let inp_acc = ref();
    let inp_psw = ref();

    // # 配置路由
    let route = useRoute();
    let router = useRouter();

    // # 获取注册页传过来的参数
    let query = route.query;
    if ("account" in query && "psw" in query) {
      data.account = query.account;
      data.psw = query.psw;

      nextTick(() => {
        inp_acc.value.value = query.account;
        inp_psw.value.value = query.psw;
      });
    }

    // # 账号正则 以及判断用户是否存在
    let acc_reg = (e) => {
      let reg =
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      let account = Number(e.target.value);

      // # 判断输入是否符合正则 和 账号是否存在于数据库中
      if (reg.test(account) && account in userData) {
        data.account = account;
      } else {
        Toast("请输入正确的手机号");
        data.account = null;
      }
    };

    // # 密码正则 以及判断用户是否存在
    let psw_reg = (e) => {
      let reg = /^[0-9a-zA-Z]\w{7,15}$/;

      let psw = Number(e.target.value);

      if (data.account) {
        // # 判断输入是否符合正则 和 账号是否存在于数据库中
        if (reg.test(psw) && psw == userData[data.account].psw) {
          // # 密码验证为正确
          data.psw = true;
        } else {
          // * 轻提示
          data.psw = false;

          Toast("请检查账号密码");
        }
      } else {
        // * 轻提示
        Toast("请检查账号密码");
      }
    };

    // # 登录按钮
    let Login = () => {
      console.log(data);

      if (data.account && data.psw) {
        localStorage.setItem("P4_userId", data.account);

        Toast.loading({
          message: "加载中...",
          forbidClick: true,

          onClose: () => {
            router.push("/home");
            setTimeout(() => {
              Toast({
                message: "登录成功",
                position: "bottom",
              });
            }, 500);
          },
        });
      } else {
        Toast("请检查账号密码");
      }
    };

    nextTick(() => {
      setTimeout(() => {
        data.isUp = true;
      }, 100);
    });

    return {
      data,
      acc_reg,
      psw_reg,
      Login,
      inp_acc,
      inp_psw,
    };
  },
};
</script>


<template>
  <div class="LoginView">
    <!-- 头部背景 -->
    <div class="login_top">
      <div class="title">LOGIN</div>
      <div class="lit_title">wish you have a good time every day</div>
    </div>
    <!-- 头部背景 -->

    <!-- 登录主体 -->
    <div :class="['login_body', { up: data.isUp }]">
      <div class="title">Welcome</div>
      <!-- 手机输入框 -->
      <div class="phonebox">
        <div class="text">+86 <span>|</span></div>
        <input
          class="phone"
          type="phone"
          placeholder="请输入11位手机号码"
          @keydown.enter="acc_reg"
          @blur="acc_reg"
          ref="inp_acc"
        />
      </div>

      <!-- 输入密码 -->
      <input
        class="password"
        type="password"
        @keydown.enter="psw_reg"
        @blur="psw_reg"
        placeholder="请输入登录密码"
        ref="inp_psw"
      />
      <!-- 登录按钮 -->
      <div class="login" @click="Login">登录</div>

      <!-- 注册按钮 -->
      <router-link to="/register" class="register">创建账号</router-link>
    </div>
    <!-- 登录主体 -->
  </div>
</template>

<style lang="scss" scoped>
.LoginView {
  overflow: hidden !important;
  height: 100vh;
  max-height: 100vh;
  // 头部背景
  .login_top {
    position: absolute;
    top: 0;
    height: 50%;
    width: 100%;
    background: linear-gradient(320deg, #56e7b9 30%, #f0f0f0);

    .title {
      font-size: 24px;
      color: #000;
      font-weight: 800;
      padding-top: 125px;
      margin-left: 25px;
    }

    .lit_title {
      margin-left: 25px;
      font-size: 10px;
      color: rgb(0, 0, 0, 0.3);
    }
  }

  // 登录主体
  .login_body {
    position: fixed;
    padding-bottom: 30px;
    bottom: -120px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    width: 100%;
    height: 65%;
    background-color: #fff;

    transition: bottom 1s;

    &.up {
      bottom: 0;
    }

    .title {
      font-size: 20px;
      font-weight: 600;
      color: #060606;
      margin-top: 50px;
      margin-left: 25px;
    }

    // 手机输入框
    .phonebox {
      margin: 0 25px;
      display: flex;
      margin-top: 30px;
      height: 60px;
      line-height: 60px;
      background-color: #f9f9f9;
      border-radius: 20px;

      .phone {
        flex: 1;
        margin-right: 20px;
        font-size: 14px;
        border: transparent;
        background-color: #f9f9f9;
      }

      .text {
        padding-left: 20px;
        width: 50px;
        font-size: 13px;
        color: #cdcdcd;
      }
    }

    // 密码输入框
    .password {
      margin: 0 25px;
      width: 86%;
      margin-top: 30px;
      height: 60px;
      line-height: 60px;
      background-color: #f7f7f7;
      border-radius: 20px;
      border: transparent;
      text-indent: 16px;
    }

    //  登录按钮
    .login {
      font-weight: 600;
      margin: 0 25px;
      text-align: center;
      font-size: 16px;
      color: #37363b;
      height: 56px;
      line-height: 56px;
      border: 3px solid #3d3d3d;
      border-radius: 12px;
      margin-top: 30px;
    }

    .register {
      display: block;
      font-weight: 600;
      margin: 0 25px;
      text-align: center;
      font-size: 16px;
      color: #fff;
      height: 56px;
      line-height: 56px;
      border: 3px solid #1d1e22;
      border-radius: 12px;
      margin-top: 30px;
      background-color: #1d1e22;
    }
  }

  // 修改输入框样式
  .phone::-webkit-input-placeholder,
  .password::-webkit-input-placeholder {
    color: #cdcdcd;
    font-size: 14px;
  }
}
</style>